<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html >
<head>
	<title>Calendar - Localization</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />
	

	<script src="<%=path %>/include/wijmo/external/jquery-1.8.0.min.js" type="text/javascript"></script>
	<script src="<%=path %>/include/wijmo/external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
	<script src="<%=path %>/include/wijmo/external/globalize.min.js" type="text/javascript"></script>
	<script src="<%=path %>/include/wijmo/external/cultures/globalize.cultures.js" type="text/javascript"></script>
	<script src="<%=path %>/include/wijmo/wijmo/jquery.wijmo.wijpopup.js" type="text/javascript"></script>
	<script src="<%=path %>/include/wijmo/wijmo/jquery.wijmo.wijcalendar.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="http://style.org.hc360.com/js/build/source/widgets/wij/hc.wijmo.css" />  
	<link rel="stylesheet" type="text/css" href="http://style.org.hc360.com/js/build/source/widgets/wij/hc.wijcalendar.css" />  
	
	
	<script type="text/javascript">

	$(function () {
	$("#calendar").wijcalendar({
		popupMode: true,
		culture: "zh-CN" ,
		selectedDatesChanged: function () {
			var selDate = $(this).wijcalendar("getSelectedDate");
			if (!!selDate)$("#popdate").val(selDate.toLocaleDateString());
		}
	});

	$("#popdate").click(function () {
			$("#calendar").wijcalendar("popup", {
				of: $("#popdate"),
				offset: '0 2'
			});
		})
	});

</script>
</head>
<body class="demo-single">
<div class="container">
	<div class="main demo"> 
		<div id="calendar">
		</div>
		<label for="popdate">Choose a Date:</label>
		<input name="popdate" type="text" id="popdate" style="width: 180px;" />
		
	</div>
	
</div>
</body>
</html>